<template>
  <div class="blogBottom">
    <input type="text" placeholder="说点什么...">
    <div class="love">
      <img src="@/assets/img/find/赞.svg" v-if="!messageInf.isLiked" @click="changeLove" alt="">
      <img src="@/assets/img/find/赞active.svg" v-if="messageInf.isLiked" @click="changeLove" alt="">
      <div>{{ this.messageInf.liked }}</div>
    </div>
    <div class="collect">
      <img src="@/assets/img/find/收藏.svg" v-if="!isCollect" @click="changeColleat" alt="">
      <img src="@/assets/img/find/收藏active.svg" v-if="isCollect" @click="changeColleat" alt="">
      <div>225</div>
    </div>
    <div class="comments">
      <img src="@/assets/img/find/评论.svg" alt="">
      <div>{{commentsNum}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'blogBottom',
  data() {
    return {
      isCollect: false,//收藏
      commentsNum : 7
    }
  },
  props: {
    messageInf: {
      type: Object,
      default :{}
    }
  },
  mounted() {
  },
  methods: {
    changeLove() {
      if(!this.messageInf.isLiked) {
        this.messageInf.isLiked = !this.messageInf.isLiked
        
      }
    },
    changeColleat() {
      this.isCollect = !this.isCollect
    },
  },
  watch: {
    messageInf(newValue){
      this.commentsNum = newValue.commentList.length
    }
  }
}
</script>

<style scoped>
.blogBottom {
  display: flex;
  position: absolute;
  bottom: 0;
  height: 49px;
  width: 100%;
}
.blogBottom input {
  flex: 2;
  height: 30px;
  width: 80%;
  padding-left: 30px;

  margin: 10px;
  border: none;
  border-radius: 5px;
  background: url('@/assets/img/find/评论input.svg') no-repeat left;
  background-size: 20px;
  background-color: #c6caca34;
  outline: none;
  caret-color:#05def1;
}
/* 点赞样式 */
.love {
  flex: 1;
  display: flex;
  height: 100%;
}
.love img {
  flex: 1;
  height: 30px;
  margin-top: 10px;
}
.love div {
  flex: 1;
  height: 30px;
  margin-top: 20px;
  padding-right: 10px;
  font-size: 15px;
}

/* 收藏样式 */
.collect {
  flex: 1;
  display: flex;
  height: 100%;
}
.collect img {
  flex: 1;
  height: 30px;
  margin-top: 10px;
}
.collect div {
  flex: 1;
  height: 30px;
  margin-top: 20px;
  padding-right: 10px;
  font-size: 15px;
}

/* 评论样式 */
.comments {
  flex: 1;
  display: flex;
  height: 100%;
}
.comments img {
  flex: 1;
  height: 30px;
  margin-top: 10px;
}
.comments div {
  flex: 1;
  height: 30px;
  margin-top: 20px;
  padding-right: 10px;
  font-size: 15px;
}
</style>